'use strict';

(function(){
  const $ = (s,root=document)=>root.querySelector(s);
  const $$ = (s,root=document)=>Array.from(root.querySelectorAll(s));

  const cats = [
    {id:'swooshes',  name:'Swooshes',  desc:'快速划过、呼啸掠过',       bg:'#f6d3d1', fg:'#9cd0ff', icon:'waves'},
    {id:'ambience',  name:'Ambience',  desc:'环境氛围、自然声场',       bg:'#ff8c20', fg:'#8fb5ff', icon:'bars'},
    {id:'water',     name:'Water',     desc:'水滴、水花、流动',         bg:'#c7c6b4', fg:'#7cc5ff', icon:'maze'},
    {id:'vehicles',  name:'Vehicles',  desc:'车船飞机、引擎机械',        bg:'#ff5c3b', fg:'#c8c3ae', icon:'car'},
    {id:'whoosh',    name:'Whoosh',    desc:'疾风掠过、穿梭起落',        bg:'#f6d3d1', fg:'#9cd0ff', icon:'lines'},
    {id:'cartoon',   name:'Cartoon',   desc:'卡通夸张、弹跳滑稽',        bg:'#74a1ff', fg:'#cfead8', icon:'smile'},
    {id:'ui',        name:'User Interface', desc:'点击、弹窗、过渡',     bg:'#f6d3d1', fg:'#7aa9ff', icon:'hand'},
    {id:'riser',     name:'Riser',     desc:'上扬铺垫、紧张氛围',        bg:'#ff5c3b', fg:'#dcd4a6', icon:'film'},
    {id:'computers', name:'Computers', desc:'科技数码、电子合成',        bg:'#74a1ff', fg:'#d5ff7c', icon:'chip'},
    {id:'objects',   name:'Objects',   desc:'日常器物、开合敲击',        bg:'#e6ff7a', fg:'#c0b9e6', icon:'blocks'},
    {id:'voices',    name:'Voices',    desc:'呼喊低语、人声拟音',        bg:'#f7e7ef', fg:'#ff74b6', icon:'blob'},
    {id:'designed',  name:'Designed',  desc:'设计音效、合成创作',        bg:'#ff5c3b', fg:'#dcd4a6', icon:'film'}
  ];

  const grid = $('#catGrid');
  const search = $('#sfxSearch');

  const iconSvg = (kind, fg)=>{
    // 简化的几何“像素风”图标
    const shapes = {
      waves: `<rect x="18" y="30" width="60" height="10" rx="2"/><rect x="40" y="52" width="40" height="10" rx="2"/><rect x="14" y="74" width="70" height="10" rx="2"/>`,
      bars:  `<rect x="24" y="28" width="10" height="52" rx="2"/><rect x="44" y="18" width="10" height="72" rx="2"/><rect x="64" y="36" width="10" height="52" rx="2"/>`,
      maze:  `<path d="M20 70h24V46h24v24h16V30H68v16H44V30H20z"/>`,
      car:   `<rect x="26" y="44" width="48" height="22" rx="3"/><circle cx="36" cy="74" r="6"/><circle cx="64" cy="74" r="6"/><rect x="30" y="38" width="40" height="8" rx="2"/>`,
      lines: `<rect x="18" y="30" width="64" height="8" rx="4"/><rect x="26" y="46" width="56" height="8" rx="4"/><rect x="36" y="62" width="46" height="8" rx="4"/>`,
      smile: `<circle cx="50" cy="52" r="20"/><rect x="26" y="32" width="48" height="30" rx="12" ry="12"/><rect x="40" y="42" width="20" height="10" rx="4"/>`,
      hand:  `<rect x="32" y="28" width="12" height="48" rx="4"/><rect x="48" y="34" width="12" height="42" rx="4"/><rect x="64" y="40" width="12" height="36" rx="4"/>`,
      film:  `<rect x="28" y="30" width="44" height="52" rx="4" ry="4" fill="none" stroke-width="6" stroke="currentColor"/>`,
      chip:  `<rect x="30" y="30" width="40" height="40" rx="6"/><rect x="44" y="44" width="12" height="12"/><rect x="22" y="30" width="6" height="16"/><rect x="72" y="30" width="6" height="16"/>`,
      blocks:`<rect x="28" y="32" width="20" height="20"/><rect x="52" y="32" width="20" height="20"/><rect x="28" y="56" width="44" height="20"/>`,
      blob:  `<path d="M30,60 q20,32 40,0 q0,-28 -20,-28 q-20,0 -20,28z"/>`
    };
    return `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <g fill="${fg}">${shapes[kind] || ''}</g>
    </svg>`;
  };

  const makeCard = (c) => {
    const a = document.createElement('a');
    a.className = 'sfx-card';
    a.href = `sfx-collection.html?cat=${encodeURIComponent(c.name)}`;
    a.setAttribute('data-name', c.name.toLowerCase());
    a.innerHTML = `
      <div class="art" style="background:${c.bg}">${iconSvg(c.icon, c.fg)}</div>
      <div class="label">${c.name}</div>
      <div class="sub">${c.desc}</div>
    `;
    return a;
  };

  cats.forEach(c => grid.appendChild(makeCard(c)));

  // 快捷键：按 / 聚焦搜索
  window.addEventListener('keydown', (e)=>{
    if(e.key === '/' && document.activeElement !== search){
      e.preventDefault(); search.focus();
    }
  });

  // 过滤
  const applyFilter = () => {
    const q = search.value.trim().toLowerCase();
    $$('.sfx-card', grid).forEach(card => {
      const name = card.getAttribute('data-name');
      card.style.display = (!q || name.includes(q)) ? '' : 'none';
    });
  };
  search.addEventListener('input', applyFilter);
})();
